<template>
  <div class="empty-state">
    <div class="empty-state-content">
      <div class="icon-container">
        <el-icon :size="64" class="empty-icon">
          <component :is="resolveIcon" />
        </el-icon>
      </div>
      <h3 class="empty-message">{{ message }}</h3>
      <div class="empty-actions" v-if="hasActionSlot || showUploadButton">
        <slot name="actions">
          <el-button v-if="showUploadButton" type="primary" @click="$emit('go-to-upload')">
            Upload Document
          </el-button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, useSlots } from 'vue'
import { Document, WarningFilled, InfoFilled } from '@element-plus/icons-vue'

export default {
  name: 'EmptyState',
  
  components: {
    Document,
    WarningFilled,
    InfoFilled
  },
  
  props: {
    message: {
      type: String,
      default: 'No data available'
    },
    icon: {
      type: String,
      default: 'Document'
    },
    showUploadButton: {
      type: Boolean,
      default: false
    }
  },
  
  emits: ['go-to-upload'],
  
  setup(props, { slots }) {
    const hasActionSlot = computed(() => !!slots.actions)
    
    const resolveIcon = computed(() => {
      // Check if the icon is a Material Design Icon (mdi-*)
      if (props.icon.startsWith('mdi-')) {
        return 'Document' // Default to Document for MDI icons since we can't use them directly
      }
      
      // Otherwise, try to use the Element Plus icon
      switch (props.icon) {
        case 'document':
          return 'Document'
        case 'warning':
          return 'WarningFilled'
        case 'info':
          return 'InfoFilled'
        default:
          return 'Document'
      }
    })
    
    return {
      hasActionSlot,
      resolveIcon
    }
  }
}
</script>

<style scoped>
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  height: 100%;
}

.empty-state-content {
  text-align: center;
  max-width: 400px;
}

.icon-container {
  margin-bottom: 16px;
}

.empty-icon {
  color: var(--el-color-info-light-5);
}

.empty-message {
  font-size: 16px;
  color: var(--el-text-color-secondary);
  margin-bottom: 20px;
}

.empty-actions {
  display: flex;
  justify-content: center;
}
</style> 